<template>
	<div class="contentBox">
		<div class="firstBox">
			<div style="height: 58px;width: 100%;border-bottom: 1px solid #e6e6e6">
				<div style="font-size: 15px;color: #001529;line-height: 58px;font-weight: 600;padding-left: 20px">添加规则</div>
			</div>
			<div style="width: 100%;display: flex;justify-content: space-between;padding: 25px 35px">
				<div style="width: 85px;font-size: 14px;color: #001529;">图片选择：</div>
				<a-checkbox-group v-model="checkedImgList" @change="onImgChangeList" style="width: 100% !important;">
					<div style="width: 100%;display: flex;flex-wrap: wrap !important;">
						<div style="width: 128px;height: 127px;margin: 16px;position: relative" v-for="(item,index) in imgList"
						     :key="index">
							<div style="position: absolute;left: 10px;top: 10px;">
								<a-checkbox :value="item.imgPath"></a-checkbox>
							</div>
							<img :src="item.base64Img" alt="" style="width: 100%;height: 100%" :key="index">
						</div>
					</div>
				</a-checkbox-group>

			</div>
			<div style="width: 100%;display: flex;justify-content: space-between;padding: 25px 35px">
				<div style="width: 85px;font-size: 14px;color: #001529;line-height: 30px">时间范围：</div>
				<div style="width: 90%">
					<a-range-picker
							:format="dateFormat"
							showTime
							allowClear
							style="width: 70%"
							placeholder="开始时间"
							@change="getTime"
					/>
				</div>
			</div>
			<div style="width: 100%;margin-top: 100px;height: 35px;align-items: center;display: flex;justify-content: center">
				<a-button type="primary"
				          style="width: 75px;height: 34px;border-radius: 4px;background-color:#fff;color: #333333;border: solid 1px #cccccc;margin-right: 20px"
				          @click="goBack">返回
				</a-button>
				<a-button v-if="btnInfoMsg==0" type="primary"
				          style="width: 75px;height: 34px;border-radius: 4px;background-color:#04b653;color: #fff;border: none"
				          @click="getBegin">开始
				</a-button>
				<a-button v-if="btnInfoMsg==1" loading :disabled="true" type="primary"
				          style="width: 135px;height: 34px;border-radius: 4px;background-color:#666666;color: #fff;border: none">
					正在执行
				</a-button>
				<a-button v-if="btnInfoMsg==2" type="primary"
				          style="width: 75px;height: 34px;border-radius: 4px;background-color:#04b653;color: #fff;border: none"
				          @click="getBegin">继续
				</a-button>
			</div>
			<div style="height: 60px;width: 100%"></div>
		</div>
		<div class="secondBox">
			<!-- 查询项 -->
			<div class="right-content">
				<div style="height: 58px;width: 100%;border-bottom: 1px solid #e6e6e6">
					<div style="font-size: 15px;color: #001529;line-height: 58px;font-weight: 600;padding-left: 20px">结果列表
					</div>
				</div>
				<a-form-model :model="form" layout="inline">
					<a-row>
						<a-col :span="16">
							<a-checkbox style="margin: 0 20px;" :indeterminate="indeterminate" :checked="checkAll"
							            @change="onCheckAllChange">
								全选
							</a-checkbox>
							<a-button style="margin-right: 10px;color: black;" @click="exportInfomation">导出数据</a-button>
							<a-button style="margin-right: 10px;color: black" @click="deleteinfomation">删除</a-button>
							<div style="display: inline-block">当前共搜索数据<span style="color: red">{{ total }}</span>条</div>
						</a-col>
						<a-col :span="1" style="padding-left: 18%;margin-top: 0.25%">
							<a-button style="color: black" @click="sequenceInfomation">时间排序
								<img alt="" src="../../assets/images/system/paixu.png" style="margin-left: 3px;"/></a-button>
						</a-col>
					</a-row>
				</a-form-model>
				<!-- 列表数据 -->
				<a-checkbox-group v-model="checkedList" @change="onChangeList" class="listgroup" style="width:100%">
					<!-- 列表 start -->
					<a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData"
					        style="padding: 0 27px;">
						<a-list-item slot="renderItem" key="item.title" slot-scope="item, index"
						             style="border: 1px solid #ddd;margin-bottom: 10px;padding-left: 50px;">
							<a-list-item-meta>
								<div v-if="index+1==1" slot="avatar" style="margin-left: -50px;margin-top: -16px; border-style: solid;border-width: 0px 0px 50px 50px ;
                border-color: transparent transparent transparent #1577FE;width: 0px;height: 0px;color: #fff;font-size: 14px;">
									<span style="position: relative;left: -40px;top: 5px;">{{ index + 1 }}</span>
								</div>
								<div v-else slot="avatar" style="margin-left: -50px;margin-top: -16px; border-style: solid;border-width: 0px 0px 50px 50px ;
                border-color: transparent transparent transparent #9CC4FF;width: 0px;height: 0px;color: #fff;font-size: 14px;">
									<span style="position: relative;left: -40px;top: 5px;">{{ index + 1 }}</span>
								</div>
								<div slot="avatar">
									<a-checkbox style="position: relative;left: -30px;top: 10px;" :value="item.id"></a-checkbox>
								</div>
								<div slot="description" style="width:98%;">
									<img alt="" v-if="item.img==null || item.img == ''">
									<img v-else :src="item.img" alt="" style="width: 10%;height: 100%;padding-right: 1%;">
									<span :title="item.content">
                                        {{ item.content ? item.content.substring(0, 40) : '' }}
                                        <span
		                                        :style="item.content && item.content.length > 130 ?'':'display: none'">...</span>
                                    </span>
									<span style="color: #0D1F32"><a :href="item.url" :title="item.url" target="_blank">查看原文</a></span>
								</div>
								<div slot="title" style="display:flex;justify-content: space-between">
									<div slot="title" style="font-weight: bold;color: black;width:70%;cursor: pointer;"
									     @click="changePageInfo(item)"
									     :title="item.title">
										{{ item.title ? item.title.substring(0, 30) : '' }}
										<span :style="item.title && item.title.length > 40 ?'':'visibility: hidden'">...</span>
									</div>
									<div style="padding-right: 30px">
										<a-button type="primary" style="background-color:#ff892a;border:1px solid #ff892a;color: #fff"
										          v-if="emo_polarity[index]=='负面'">
											{{ emo_polarity[index] }}
										</a-button>
										<a-button type="primary" style="background-color:#1ea000;border:1px solid #1ea000;color: #fff"
										          v-if="emo_polarity[index]=='正面'">
											{{ emo_polarity[index] }}
										</a-button>
										<a-button type="primary" style="color: #fff" v-if="emo_polarity[index]=='中性'">
											{{ emo_polarity[index] }}
										</a-button>

									</div>
								</div>
							</a-list-item-meta>
							<div style="height: 20px;color: black;margin-bottom: 10px;padding-left:16px;">
								<a-col :span="8" :title="item.keyword "
								       style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
									关键词：{{ item.keyword }}
								</a-col>
								<a-col :span="8" :title="item.caseType"
								       style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
									事件分类：{{ item.caseType }}
								</a-col>
								<a-col :span="8" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
									<tag>文章级别：
										<a-popover title="" trigger="hover">
                                        <span v-if="item.levelInference ==3"
                                              style="color: #FE3328;cursor:pointer">重要级别
                                        </span>
											<span v-else-if="item.levelInference ==1"
											      style="color: #51AE43;cursor:pointer">一般级别
                                        </span>
											<span v-else-if="item.levelInference ==2"
											      style="color: #5698FE;cursor:pointer">中等级别
                                        </span>
											<span v-else-if="item.levelInference ==3"
											      style="color: #FF8746;cursor:pointer">重要级别
                                        </span>
											<template slot="content">
												<p @click="changebuttonlevel(index,3)" style="cursor:pointer"
												   v-if="!(item.levelInference ==3)">
													重要级别</p>
												<p @click="changebuttonlevel(index,2)" style="cursor:pointer"
												   v-if="!(item.levelInference ==2)">中等级别</p>
												<p @click="changebuttonlevel(index,1)" style="cursor:pointer"
												   v-if="!(item.levelInference ==1)">一般级别</p>
											</template>

										</a-popover>
									</tag>
								</a-col>
							</div>
							<div style="height: 20px;color: black;padding-left:16px;">
								<a-col v-if="item.eventClassStatus==0" :span="8" title="待处理"
								       style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
									标注分类：待处理
								</a-col>
								<a-col v-if="item.eventClassStatus==1" :span="8" title="已处理"
								       style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
									标注分类：已处理
								</a-col>
								<a-col v-if="item.eventClassStatus==2" :span="8" title="处理失败"
								       style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
									标注分类：处理失败
								</a-col>
								<a-col :span="8" :title="item.informationSources"
								       style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
									发布媒体：{{ item.informationSources }}
								</a-col>
								<a-col :span="8">
									更新时间：{{ item.releaseTime }}
								</a-col>
							</div>
						</a-list-item>
					</a-list>
				</a-checkbox-group>
			</div>
		</div>
	</div>
</template>
<script>
import {
	DeleteThreeList,
	getResultList,
	getTaskList,
	getThreeExcel,
	saveOrUpDate
} from "../../api/eventAnalyze/eventAnalyzeResults";

export default {
	data() {
		return {
			ids: null,
			indeterminate: false,
			checkAll: false,
			btnInfoMsg: 0,
			total: 0, // 收集总条数
			form: {},
			checked: true,
			startTimeStr: '',
			endTimeStr: '',
			dateFormat: 'YYYY-MM-DD HH:mm:ss',
			listData: [],
			imgList: [],
			checkedImgList: [],
			orderType: '1',
			checkedList: [], // 列表全选
			checkedDataList: [], // 列表对象全选
			emo_polarity: [], // 情感急性
			pagination: { // 分页
				current: 1,
				pageSize: 10,
				showSizeChanger: true,
				total: 0,
				showQuickJumper: true,
				showTotal: total => `共 ${total} 条`,
				pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
				onChange: (current, pageSize) => {
					this.pagination.current = current;
					this.pagination.pageSize = pageSize;
				},
				onShowSizeChange: (current, pageSize) => {
					this.pagination.current = current;
					this.pagination.pageSize = pageSize;
				},
			},
		};
	},
	mounted() {
		this.ids = this.$route.query.id
		console.log('数据id', this.ids)
		this.init()
	},
	methods: {
		init() {
			//获取右侧列表数据
			this.getRightList()
			//    获取左侧图片
			this.getLeftImg()
		},
		//获取左侧图片
		getLeftImg() {
			let params = {
				id: this.ids,
			}
			getTaskList(params).then(res => {
				if (res.status == 200) {
					this.imgList = res.data.urlList
					res.data.urlList.forEach((item, index) => {
						if (item.isHave) {
							this.checkedImgList.push(item.imgPath)
						}
					})
				}
				console.log('左侧图片', res, this.checkedImgList)
			})
		},
		//获取右侧列表
		getRightList() {
			let params = {
				id: this.ids,
				pageSize: this.pagination.current,
				limit: this.pagination.pageSize,
				orderType: this.orderType,
			}
			getResultList(params).then(res => {
				if (res.status == 200) {
					this.listData = []
					this.listData = res.data.records;
					this.pagination.total = res.data.total;
					this.total = res.data.total;
					console.log('右面列表数据', this.listData)
					for (let k = 0; k < this.listData.length; k++) {
						if (this.listData[k].emotionalPolarity == 1) {
							this.emo_polarity[k] = '正面'
						}
						if (this.listData[k].emotionalPolarity == 2) {
							this.emo_polarity[k] = '中性'
						}
						if (this.listData[k].emotionalPolarity == 3) {
							this.emo_polarity[k] = '负面'
						}
					}
				}
			})
		},
		// 全选
		onCheckAllChange() {
			this.checkedList = []
			this.checkedDataList = []
			this.checkAll = !this.checkAll
			if (this.checkAll) {
				this.checkedList.splice(0)
				this.listData.forEach((item, i) => {
					this.checkedList.push(item.id)
					this.checkedDataList.push(item);
				})
			} else {
				this.checkedList.splice(0)
			}
		},
		// 导出数据
		exportInfomation() {
			console.log(this.checkedList, this.checkedDataList)
			if (this.checkedList && this.checkedList.length == 0) {
				this.$message.error("请选择要导出的数据！");
			} else {
				getThreeExcel(this.checkedList).then(res => {
					let blob = new Blob([res.data], {
						type: "application/octet-stream",
					});
					let filename = "任务信息" + '.xlsx'
					// 将blob对象转为一个URL
					var blobURL = window.URL.createObjectURL(blob);
					// 创建一个a标签
					var tempLink = document.createElement("a");
					// 隐藏a标签
					tempLink.style.display = "none";
					// 设置a标签的href属性为blob对象转化的URL
					tempLink.href = blobURL;
					// 给a标签添加下载属性
					tempLink.setAttribute("download", filename);
					if (typeof tempLink.download === "undefined") {
						tempLink.setAttribute("target", "_blank");
					}
					// 将a标签添加到body当中
					document.body.appendChild(tempLink);
					// 启动下载
					tempLink.click();
					// 下载完毕删除a标签
					document.body.removeChild(tempLink);
					window.URL.revokeObjectURL(blobURL);
					this.$message({
						message: "导出成功~",
						type: "success",
					});
				})
						.catch((err) => {
							this.$message.error(err.msg)
						})
			}
		},
		// 删除
		deleteinfomation() {
			if (this.checkedList.length == 0) {
				this.$message.error("至少得选择一行！");
			} else {
				DeleteThreeList(this.ids, this.checkedList).then(res => {
					if (res.status == 200) {
						this.$message.success("删除成功！");
						this.checkedList = []
						this.getRightList();
					}
				})
			}
		},
		// 时间排序
		sequenceInfomation() {
			this.orderType == '1' ? '2' : '1'
			this.getRightList()
		},
		onImgChangeList(checkedValues) {
			console.log('图片选择', this.checkedImgList)
		},
		//列表数据
		onChangeList(checkedValues) {
			console.log('列表选择', this.checkedList)
			if (this.listData.length === this.checkedList.length) {
				this.checkAll = true;
			} else {
				this.checkAll = false;
			}
		},

		changebuttonlevel() {
		},

		getBegin() {
			if (this.checkedImgList.length <= 0) {
				this.$message.error('请选择图片！')
			} else if (this.startTimeStr == '' || this.endTimeStr == '') {
				this.$message.error('请选择时间！')
			} else {
				let urlList = []
				this.btnInfoMsg = 1
				this.checkedImgList.forEach((item, index) => {
					this.$set(urlList, index, {imgPath: item})
				})
				console.log('=======>>>>>', urlList)
				let params = {
					eventAnalyzeId: this.ids,
					startTime: this.startTimeStr,
					endTime: this.endTimeStr,
					urlList
				}
				saveOrUpDate(params).then(res => {
					console.log('开始任务', res)
					if (res.status == 200) {
						setInterval(this.getBtnStatus, 60000);
					}
				})
			}
		},
		getBtnStatus() {
			console.log('按钮状态')
		},
		goBack() {
			history.go(-1)
		},
		// 获取时间
		getTime(date, item) {
			console.log(date, item)
			this.startTimeStr = item[0]
			this.endTimeStr = item[1]
		},
		changePageInfo(item) {
			let params = JSON.stringify(item)
			this.$router.push({
				path: '/createTaskDetail',
				query: {
					params: params
				}
			});
		},
	}
};
</script>

<style scoped lang="less">
* {
	padding: 0;
	margin: 0;
	text-shadow: none;
}

.contentBox {
	width: 100%;
	display: flex;
	height: 100%;
	justify-content: space-between;

	.firstBox {
		width: 48%;
		height: 100%;
	}

	.secondBox {
		width: 48%;
		height: 100%;
	}
}

.right-content {
	margin-bottom: 40px;

	.ant-row {
		height: 50px;
		line-height: 50px;

		.content-left {
			text-align: right;
			font-size: 14px;
			height: 100%;
		}

		.content-right {
			float: right;
			height: 100%;
			position: relative;
			left: -30px;

			.ant-input {
				width: 480px;
				height: 40px;
				border-radius: 3px;
			}
		}
	}
}

/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > div {
	color: black;
	font-size: 13px;
	cursor: pointer;
}

/deep/ .ant-timeline-item-head-custom {
	background: transparent !important;
}

.ant-btn-primary {
	color: #ffffff;
}

/deep/ .ant-btn {
	padding: 2px 13px;
	border-radius: 2px;
	font-family: PingFangSC-Medium, Helvetica, Arial, Verdana, Tahoma, sans-serif;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #4d4d4d;
}
</style>
